// @ts-ignore
import { LeftOutlined, RightOutlined } from '@ant-design/icons';
import { Col, Row } from 'antd';
import { useState } from 'react';
import './Home.less';
import Chart1 from './components/Chart1';
import Chart3 from './components/Chart3/Chart3';
import Chart4 from './components/Chart4/Chart4';
import Chart7 from './components/Chart7/Chart7';
import Chart8 from './components/Chart8/Chart8';
import Number from './components/Number/Number';

import ChartView1 from './chartView/Chart1/Chart1';
import ChartView2 from './chartView/Chart2/Chart2';
import ChartView3 from './chartView/Chart3/Chart3';
import ChartView4 from './chartView/Chart4/Chart4';
import ChartView5 from './chartView/Chart5/Chart5';

import ChartViews1 from './chartViews/Chart1/Chart1';
import ChartViews2 from './chartViews/Chart2/Chart2';
import ChartViews3 from './chartViews/Chart3/Chart3';
import ChartViews4 from './chartViews/Chart4/Chart4';

const Home: React.FC = () => {
  const [active, setActive] = useState(0);

  const rightChange = () => {
    active >= 2 ? setActive(0) : setActive(active + 1)
  }

  const leftChange = () => {
    active <= 0 ? setActive(2) : setActive(active - 1)
  }

  return (
    <div className="home">
      <Row gutter={10}>
        <Col span={7}>
          {active === 0 ? (
            <>
              <Chart8></Chart8>
              <Chart1></Chart1>
            </>
          ) : active === 1 ? (
            <>
              <ChartView1></ChartView1>
              <ChartView2></ChartView2>
            </>
          ) : (
            <>
              <ChartViews1></ChartViews1>
              <ChartViews2></ChartViews2>
            </>
          )}
        </Col>
        <Col span={10}>
          <div className="flex-between titleBox">
            <div className="leftOutlined titleIcon" onClick={leftChange}>
              <LeftOutlined />
            </div>
            <div className="titleCenter">中药数据视图</div>
            <div className="rightOutlined titleIcon" onClick={rightChange}>
              <RightOutlined />
            </div>
          </div>
          <Chart3></Chart3>
          <Chart7></Chart7>
        </Col>
        <Col span={7}>
          {active === 0 ? (
            <>
              <Number></Number>
              <Chart4></Chart4>
            </>
          ) : active === 1 ? (
            <>
              <ChartView3></ChartView3>
              <ChartView4></ChartView4>
              <ChartView5></ChartView5>
            </>
          ): (
            <>
              <ChartViews3></ChartViews3>
              <ChartViews4></ChartViews4>
            </>
          )}
        </Col>
      </Row>
    </div>
  );
};

export default Home;
